<template>
  <div id="user">
    <!-- 未登录实现的 -->
    <div v-if="!$store.state.isLogin" class="login-part">
      <div class="default-avatar"></div>
      <span @click="login">{{ username }}</span>
    </div>
    <!-- 登录实现的 -->
    <div v-else class="login-part">
      <div class="default-avatar" :style="[ { 'background-image': `url(${$store.getters.avatarUrl})` } ]"></div>
      <span>{{ $store.getters.nickname }}</span>
    </div>
    <login
      :isLoginDialogVisible="isLoginDialogVisible"
      ref="loginRef"/>
  </div>
</template>

<script>
import Login from 'components/content/login/Login.vue'

export default {
  name: 'HeaderRight',
  components: {
    Login
  },
  data () {
    return {
      avatar: 'assets/img/default_avatar.png',
      isLoginDialogVisible: false
    }
  },
  computed: {
    username () {
      if (!this.$store.state.isLogin) return '未登录'
      return '已登录'
    }
  },
  methods: {
    // 1. 登录
    login () {
      this.$refs.loginRef.openLoginDialog()
    }
  }
}
</script>

<style scoped lang="less">
#user {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 12px;
  .login-part {
    display: flex;
    align-items: center;
  }
  > div:nth-of-type(1) {
    .default-avatar {
      background-image: url('~assets/img/default_avatar.png');
    }
  }
  span {
    margin-left: 8px;
    cursor: pointer;
  }
  img {
    vertical-align: bottom;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
  }
  .default-avatar {
    width: 30px;
    height: 30px;
    background: #fff no-repeat -3px -3px;
    border-radius: 50%;
    background-size: 36px 36px;
  }
}
</style>
